<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>

.giftBox {
	padding: 0.75rem 0 0;
}
#banner .swiper-slide {
	border-radius: 0.25rem;
	overflow: hidden;
	width: 90%;
}
.giftList {
	margin: 10px 9px 0;
}
.giftList li {
	float: left;
	width: 25%;
	padding: 1px;
}
.giftList li.wide {
	width: 50%;
}
.giftList li img {
	width: 100%;
	height: auto;
}
.nowPrice{
	color: #E73250;
}
.comGodList .textBox{
	padding: 0.5rem 0.35rem 0.5rem;
}
.mo_div{
	padding: 0 0.5rem;
	margin-top: 0.5rem;
}
</style>
</head>
<body>
	<div class="swiper-container mainImg">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="../../image/other/02.jpg" width="100%" alt=""></div>
		</div>
	</div>
	<div class="mo_div aui-flex-col aui-flex-between aui-flex-middle">
		<div class="color-333 text-bold aui-font-size-14">任购一款礼包，即可成为VIP</div>
		<div class="color-666 aui-padded-r-10 aui-font-size-12" tapmode onclick="openGiftList();">查看全部礼包</div>
	</div>
	<div class="comFlowBox">
		<div class="comGodList" id="flow_html">
			<div class="grid-sizer"></div>

		</div>
	</div>

	<script type="text/x-dot-template" id="flow_tpl">
		{{ for(var i in it){ }}
		<div class="item" data-id="{{= it[i].goods_id}}" tapmode onClick="openGoodsDetail({{= it[i].goods_id}});">
            <div class="inner">
                <div class="photo"><img src="{{= it[i].goods_cover }}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2">{{= it[i].goods_name }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
						<div class="nowPrice">¥{{= it[i].goods_sale_price }}</div>
						<div class="delPrice">¥<del>{{= it[i].goods_market_price }}</del></div>
						<div class="flex-auto"></div>
						<div class="aui-font-size-10 color-666">月销量：{{= it[i].goods_month_sales }}</div>
					</div>
                </div>
            </div>
		</div>
		{{ } }}
    </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
var topSwiper;
var gridDom = '#flow_html';
var grid;
var pageSize = 6;
var currentPage = 1;
var godType = 1;
var postData = {
	pageNo: currentPage,
	pageSize: pageSize,
	type: godType
};
apiready = function() {
	api.parseTapmode();
	getData();
};
//调用瀑布流
grid = new Masonry(gridDom, {
	columnWidth: '.grid-sizer',
	itemSelector: '.item',
	percentPosition: true
});
imagesLoaded(gridDom, function() {
	grid.layout();
});

function getData(){
	api.ajax({
        url: BASE_URL + 'App/Mall/goodsLists',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
        if (ret) {
            if(ret.code == 1 && ret.data.length > 0){
                getFlow(ret.data);
                currentPage++;
				api.parseTapmode();
				sliderInit();
			}
        }
    });
}

//顶部轮播
function sliderInit(){
	if( $$('.mainImg .swiper-slide').length > 1 ){
		topSwiper = new Swiper('.mainImg',{
			speed: 600,
			autoplay: true
		});
	}
}

//瀑布流
function getFlow(flowData) {
	var tpl = $$('#flow_tpl').html();
	var tempFn = doT.template(tpl);
	var elem = $$(tempFn(flowData));
	if( currentPage==1 ){
		$$('#flow_html').html('<div class="grid-sizer"></div>');
	}
	$$(gridDom).append(elem);
	grid.appended(elem);
	imagesLoaded(gridDom, function() {
		grid.layout();
	});

	api.parseTapmode();
}

//打开列表页
function openGiftList(){
	api.openWin({
		name: 'gift_list_win',
		url: 'gift_index_win.html',
		pageParam: {
			type: 'list'
		}
	});
}

</script>
</html>
